<template>
  <Layout>
    <PageHeaderNew :items="items"></PageHeaderNew>
    <div class="row">
      <div class="col-lg-12">
        <div class="card">
          <div class="card-body">
            <div>
              <div class="form-group row" style="margin-top:10px;padding: 0 12px;align-items: center;">
                <label class="col-md-1" for="productname">数据源名称</label>
                <div class="col-md-5">
                  <b-form-input
                    for="text"
                    v-model="name"
                    placeholder="请输入数据源名称"
                    trim
                  ></b-form-input>
                </div>
              </div>
              <div class="row col-md-12">
                <div class="col-md-3">
                  <div class="form-group row">
                    <label class="col-md-4 padding-right col-form-label col-offset-1"
                      >数据实例</label
                    >
                    <div class="col-md-8">
                      <select class="form-control .col-md-offset-2">
                        <option>请选择一个实例</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="col-md-3">
                  <div class="form-group row">
                    <label class="col-md-4 padding-right col-form-label col-offset-1"
                      >数据库</label
                    >
                    <div class="col-md-8">
                      <select class="form-control .col-md-offset-2">
                        <option>请选择一个库</option>
                      </select>
                    </div>
                  </div>
                </div>
              </div>
              <b-tabs justified nav-class="nav-tabs-custom newul" content-class="p-3 text-muted">
                <b-tab active>
                  <template v-slot:title>
                    <span class="d-inline-block d-sm-none">
                      <i class="fas fa-cog"></i>
                    </span>
                    <span class="d-none d-sm-inline-block">数据查询脚本</span>
                  </template>
                  <div style="width:100%;height:300px;border:1px solid #dddddd;"></div>
                </b-tab>
                <b-tab>
                  <template v-slot:title>
                    <span class="d-inline-block d-sm-none">
                      <i class="fas fa-cog"></i>
                    </span>
                    <span class="d-none d-sm-inline-block">执行结果</span>
                  </template>
                  <b-table
                    class="table-centered"
                    :items="ordersData"
                    :fields="fields"
                    responsive="sm"
                    :per-page="perPage"
                    :current-page="1"
                    thead-class="thead-light"
                    @filtered="onFiltered"
                  >
                    
                    <template v-slot:cell(viewDetail)>
                      <span style="cursor: pointer;">数据字段</span>
                      <span style="margin:0 3px;">|</span>
                      <span style="cursor: pointer;">数据详情</span>
                      <span style="margin:0 3px;">|</span>
                      <span style="cursor: pointer;">删除表</span>
                    </template>
                  </b-table>
                </b-tab>
              </b-tabs>
              <div class="p-3">
                <b-button class="btn btn-primary" variant="success">
                  测试
                </b-button>
                <button style="margin-left: 20px;" @click="preservation" class="btn btn-primary">
                  保存
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Layout>
</template>

<script>
import Layout from "../../../layouts/main";
import PageHeaderNew from "@/components/page-header-new";

export default {
  components: {
    Layout,
    PageHeaderNew,
  },
  data() {
    return {
      items: [
        {
          text: "数仓实例",
          url: "/datahouse/example",
        },{
          text: "添加数据源",
          url: "/",
        }
      ],
      name: "",
      ordersData: [
        {
          name: "",
          fieldNum: "",
          dataNum: "",
        }
      ],
      totalRows: 100,
      currentPage: 1,
      perPage: 10,
      fields: [
        { key: "name", label: "第一行" },
        { key: "fieldNum", label: "第二行" },
        { key: "dataNum", label: "第三行" },
      ],
    };
  },
  watch: {
    "currentPage": {
      handler(){
        console.log("触发分页");
      }
    }
  },
  methods: {
    onFiltered(){},
    preservation(){
      this.$router.push('/datahouse/example')
    }
  }
};
</script>

<style lang="scss" scoped>
.card-body ::v-deep .newul{
  display: block;
  li{
    display: inline-block;
    margin: 0 1rem;
    a{
      padding: 0.5rem 0rem;
    }
  }
}
</style>